<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Our superheroes</title>
<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
    </header>
    <section>
    </section>
    <script>
        const header = document.querySelector('header');
        const section = document.querySelector('section');
        var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
        var request = new XMLHttpRequest();
        request.open('GET',requestURL);
        request.responseType = 'json';
        request.send();
        request.onload = function() {
          var superHeroess = request.response;
          populateHeader(superHeroess);
          showHeroes(superHeroess);     
        }

        function populateHeader(jsonObj) {
          var myh1 = document.createElement('h1');
          myh1.textContent = jsonObj['squadName'];
          header.appendChild(myh1);
          var mypara = document.createElement('p');
          mypara.textContent = 'Hometown: ' + jsonObj['homeTown'] + '// Formed:' + jsonObj['formed'];
          header.appendChild(mypara)
        }

        function showHeroes(jsonObj) {
          var heroes = jsonObj['members'];
          for (let i = 0 ; i < heroes.length ; i++) {
            var myarticle = document.createElement('article');
            var myh2 = document.createElement('h2');
            var para1 = document.createElement('p');
            var para2 = document.createElement('p');
            var para3 = document.createElement('p');
            var mylist = document.createElement('ul');

            myh2.textContent = heroes[i].name;
            para1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
            para2.textContent = 'Age: ' + heroes[i].age;
            para3.textContent = 'Superpowers:';

            var superPowers = heroes[i].powers;
            for (let j = 0 ; j < superPowers.length ; j++) {
              var listitem = document.createElement('li');
              listitem.textContent = superPowers[j];
              mylist.appendChild(listitem)
            }

            myarticle.appendChild(myh2);
            myarticle.appendChild(para1);
            myarticle.appendChild(para2);
            myarticle.appendChild(para3);
            myarticle.appendChild(mylist)

            section.appendChild(myarticle)
          }
        }
    </script>
</body>
</html>